<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <title></title>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <link rel="stylesheet" href="../bootstrapvalidator-aae9288/dist/css/bootstrapValidator.css">
    <title>客户管理</title>
</head>
<body>
<div class="row" id="tableToolBar">
    <button class="btn btn-sm btn-warning" id="addBtn" style="margin-left: 15px"><i class="fa fa-plus"
                                                                                    aria-hidden="true"></i>添加客户
    </button>
    <button class="btn btn-sm btn-danger" id="deleteMoreBtn">批量删除</button>
</div>
    <!--boostrop-table的样式表-->
    <table id="data-table"></table>

<!--删除模态框-->
<div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    客户信息</h4>
            </div>
            <div class="modal-body" id="deleteDialogMsg">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="deleteBtn">
                    删除
                </button>
            </div>
        </div><!-- /.modal-content --></div>
</div>
<!--添加和编辑模态框-->
<div class="modal fade" id="MyModalforAddandEdit" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabelTitle">
                    办理入住
                </h4>
            </div>
            <div class="modal-body" id="TipForAddandEdit">
                <form id="ForAddandEditForm">
                    <div class="form-group">
                        <label class="col-md-3 control-label hidden">客户编号</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control hidden" id="guest_id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="guest_name">姓名</label>
                        <input type="text" class="form-control" id="guest_name" name="guest_name" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="guest_idcard">身份证</label>
                        <input type="text" class="form-control" id="guest_idcard" name="guest_idcard" placeholder="请输入身份证">
                    </div>
                    <div class="form-group">
                        <label for="guest_phone">电话</label>
                        <input type="text" class="form-control" id="guest_phone" name="guest_phone" placeholder="请输入电话">
                    </div>
                    <div class="form-group">
                        <label for="guest_roomid">房间号</label>
                        <input type="text" class="form-control" id="guest_roomid" name="guest_roomid" placeholder="请输入房间号">
                    </div>
                    <div class="text-right">
                        <span id="returnMessage" class="glyphicon"> </span>
                        <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                        <button id="addorEditBtn" type="button" class="btn btn-primary">办理</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap-table/bootstrap-table.min.js"></script>
<!--    <script src="../js/j_node2_1.js"></script>-->
    <script src="../toastr/toastr.min.js"></script>
    <script src="../jquery-validation/jquery.validate.js"></script>
    <script src="../jquery-validation/messages_zh.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/bootstrapValidator.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/language/zh_CN.js"></script>
    <script>
        var guest_ids=[];
        $(document).ready(function () {


        initTable();
    function initTable() {
        //让bookstraptable销毁
        $("#data-table").bootstrapTable("destroy");
        $("#data-table").bootstrapTable({
            url: "/guest/selectAllGuest",
            method: 'post', //请求方式（*）
            toolbar: '#addBtn,#deleteMoreBtn',            //工具按钮用哪个容器
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式
            sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页,并记录
            pageSize: 5, //每页的记录行数（*）
            pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
            search: true, //是否显示表格搜索,模糊查询
            strictSearch: false,//精确查询
            // silent : true,// 刷新事件必须设置
            showColumns: true, //是否显示所有的列（选择显示的列）
            showRefresh: true, //是否显示刷新按钮
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: true, //是否启用点击选中行
            //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            showToggle: true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            clickToSelect: true,    //是否启用点击选中行
           // queryParams: queryParams,
            columns: [

                {
                    checkbox: true,

                },
                {
                    field: 'guest_id',//JSon数据中的相应的key
                    title: '客户编号',//表头信息
                    sortable: true,

                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'guest_name',//JSon数据中的相应的key
                    title: '客户姓名',//表头信息
                    sortable: true,

                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'guest_idcard',
                    title: '身份证号',
                    sortable: true,

                    align: 'center',
                    valign: 'middle',

                },
                {
                    field: 'guest_phone',
                    title: '手机号',
                    sortable: true,

                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'guest_roomid',
                    title: '房间号',

                    align: 'center',
                    sortable: true,
                    valign: 'middle',
                },
                {
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    events: operateEvents,
                    formatter: function (value, row, index) {
                        return "<button class='btn btn-info updateGuest'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> 编辑</button> <button class='btn btn-danger deleteGuest'> <i class='fa fa-trash' aria-hidden='true'></i> 删除</button>"
                            ;
                    }
                }
            ],
            onLoadSuccess: function (res) {
                console.log(res);
                //复选框的居中样式
                $(".bs-checkbox").css({"text-align": 'center', "vertical-align": "middle"});
            }, onLoadError: function (statusCode) {
                return "加载失败了"
            }, formatLoadingMessage: function () {
                //正在加载
                return "拼命加载中...";
            }, formatNoMatches: function () {
                //没有匹配的结果
                return '无符合条件的记录';
            }
        });
    }

            var form = $('#ForAddandEditForm');
            form.bootstrapValidator({
                message: '输入值不合法',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    guest_name: {
                        message: '用户名不合法',
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 30,
                                message: '请输入2到30个字符'
                            }//,
                            // regexp: {
                            //     regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
                            //     message: '用户名只能由字母、数字、点、下划线和汉字组成 '
                            // }
                        }
                    }
                    , guest_idcard: {
                        validators: {
                            notEmpty: {
                                message: '身份证不能为空'
                            }
                        }
                    }, guest_phone: {
                        validators: {
                            notEmpty: {
                                message: '手机号不能为空'
                            },
                            regexp: {
                                regexp: "^([0-9]{11})?$",
                                message: '手机号码格式错误'
                            }
                        }
                    }
                }
            });

            //添加或编辑模态框的确认按钮
        $("#addorEditBtn").click(function () {
            var guest_id=$("#guest_id").val();
            alert(guest_id);
            if(guest_id!=""){
                $.ajax(  {
                    url:"/guest/updateGuest",
                    datatype:"json",
                    type:"get",
                    data:{
                           guest_id: guest_id,
                            guest_name:$("#guest_name").val(),
                            guest_idcard:$("#guest_idcard").val(),
                           guest_phone: $("#guest_phone").val(),
                           guest_roomid: $("#guest_roomid").val(),
                    },
                    success:function (result) {
                        if(result.errorCode==0){
                            $("#MyModalforAddandEdit").modal("hide");
                            toastr.success(result.status);
                        }
                    }
                })
            }else{
                $.ajax({
                    url:"/guest/insertGuestforGuestlist",
                    datatype:"json",
                    type:"post",
                    data:{
                        //guest_id: $("#guest_id").val(),
                        guest_name:$("#guest_name").val(),
                        guest_idcard:$("#guest_idcard").val(),
                        guest_phone: $("#guest_phone").val(),
                        guest_roomid: $("#guest_roomid").val(),
                    },
                    success: function (rs) {
                        var errorCode = rs.errorCode;
                        if (errorCode == 0) {
                            //模态框成功后消失
                            $("#MyModalforAddandEdit").modal("hide");
                            //插入成功后刷新
                            initTable();
                            //刷新后出一个提示框
                            toastr.success(rs.status);
                        } else {
                            toastr.error(rs.status);
                            $("#MyModalforAddandEdit").modal("hide");
                        }
                    }
                })
            }
        });
          //delete
            $("#deleteMoreBtn").click(function () {
                //点击每一行的复选框都会将选中的行添加到数组中
                var rows = $("#data-table").bootstrapTable("getSelections");
                for(var i=0;i<rows.length;i++){
                    guest_ids[i]=rows[i].guest_id;
                }
                alert("=========="+guest_ids[0]);
                $("#deleteDialogMsg").html("您确定要删除这"+rows.length+"间房间信息吗？");
                $("#myDeleteModal").modal("show");
            })

         $("#deleteBtn").click(function () {
             $.ajax({
                 url:"/guest/deleteGuest",
                 datatype:"json",
                 type:"post",
                 data:{
                     guest_id:guest_ids
                 },
                 //序列化,能够传递数组给服务器
                 traditional: true,
                 success:function (result) {
                     var errorCode = result.errorCode;
                        if(errorCode==0){
                            $("#myDeleteModal").modal("hide");
                            initTable();
                            toastr.success(result.status);
                        }else if(errorCode==-1) {
                            $("#myDeleteModal").modal("hide");
                            toastr.error(result.status);
                        }
                    }
             })
         })


        //添加客户
            $("#addBtn").click(function () {
                $("#guest_id").val("");
                showModalforAddandEdit();
            });
            //退出模态框下次点开编辑 上次模态框内容清除
            $("#MyModalforAddandEdit").on('hidden.bs.modal', function () {
                clearModelData();
            });
        //清空模态框
            function clearModelData() {
                $("#guest_id").val("");
                $("#guest_name").val("");
                $("#guest_idcard").val("");
                $("#guest_phone").val("");
            }
    });
    window.operateEvents = {
        'click .updateGuest': function (e, value, row, index) {
            $("#guest_id").val(row.guest_id);
            $.ajax({
                url: "/guest/selectGuestById",
                type: "post",
                dataType: "json",
                data: {
                    guest_id: row.guest_id
                },
                success: function (res) {
                    console.log(res);
                    if (res.errorCode == 0) {
                        showModalforAddandEdit();
                        $("#guest_id").val(res.object.guest_id)
                        $("#guest_name").val(res.object.guest_name);
                        $("#guest_idcard").val(res.object.guest_idcard);
                        $("#guest_phone").val(res.object.guest_phone);
                        $("#guest_roomid").val(res.object.guest_roomid);
                    }
                }
            });
        },

        //该点击事件需要将括号中的参数写全才可以显示出来
        'click .deleteGuest': function (e, value, row, index) {
            guest_id = row.guest_id;
            guest_ids[0] = row.guest_id;
            $("#deleteDialogMsg").html("确定要删除" + row.guest_roomid + "这条数据吗？");
            $("#myDeleteModal").modal("show");
        }
    };
        function showModalforAddandEdit() {
            var guest_id = $("#guest_id").val();
            if(guest_id!=""){
            $("#myModalLabelTitle").text("编辑入住");
            $("#addorEditBtn").text("编辑")
            $("#MyModalforAddandEdit").modal("show");
            }else{
                $("#myModalLabelTitle").text("添加入住");
                $("#addorEditBtn").text("添加")
                $("#MyModalforAddandEdit").modal("show");
            }
        }

    </script>
    </body>
</html>